<template>
  <div
    class="event-item"
    :style="{backgroundColor:event.color,color:event.size,height,whiteSpace,wordBreak}"
    :class="cssClasses"
    @click="$emit('click', event, $event)"
  >
    <div class="pdd" v-show="typesof==1||typesof==2">{{event.schooltime}}</div>
    <div class="paragraph pdd">{{ event.title }}</div>
    <div class="pdd" v-show="typesof==1||typesof==2">{{ event.classban }}</div>
    <span v-show="typesof==2" v-for="(v,k) in event.data" :key="k">{{k+':'+ v}}&nbsp;&nbsp;</span>
  </div>
</template>

<script>
import moment from "moment";

export default {
  props: ["event", "date", "firstDay", "typesof"],
  mounted() {
    this.txt(this.typesof);
  },
  data() {
    return {
      height: "80px",
      whiteSpace: "pre-wrap",
      wordBreak: "break-all"
    };
  },
  methods: {
    txt(v) {
      switch (v) {
        case 0:
          this.whiteSpace = "nowrap";
          this.overflow = "hidden";
          this.height = "18px";
          break;
        case 1:
          this.height = "80px";
          this.whiteSpace = "pre-wrap";
          this.wordBreak = "break-all";
          break;
        case 2:
          this.height = "100px";
          this.whiteSpace = "pre-wrap";
          this.wordBreak = "break-all";
          break;
      }
    }
  },
  watch: {
    typesof() {
      this.txt(this.typesof);
    }
  },
  computed: {
    cssClasses() {
      let cssClasses = "";
      if (!Array.isArray(cssClasses)) {
        cssClasses = [cssClasses];
      } else {
        cssClasses = Array.from(cssClasses);
      }
      if (this.start.isSame(this.date, "day")) {
        cssClasses.push("is-start");
      }

      if (this.end.isSame(this.date, "day")) {
        cssClasses.push("is-end");
      }

      if (!this.event.isShow) {
        cssClasses.push("is-opacity");
      }

      return cssClasses.join(" ");
    },
    showTitle() {
      return (
        this.date.day() == this.firstDay || this.start.isSame(this.date, "day")
      );
    },
    start() {
      return moment(this.event.start);
    },
    // end () {
    //     return moment(this.event.end);
    // },
    end() {
      return moment(this.event.start);
    }
  }
};
</script>


<style lang="scss" scoped>
.event-item {
  cursor: pointer;
  font-size: 12px;
  // background-color:#C7E6FD;
  margin-bottom: 2px;
  color: rgba(0, 0, 0, 0.87);
  padding: 0 5px 0 4px;
  height: 18px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &.is-start {
    margin-left: 4px;
    // border-top-left-radius:4px;
    // border-bottom-left-radius:4px;
  }
  &.is-end {
    margin-right: 4px;
    // border-top-right-radius:4px;
    // border-bottom-right-radius:4px;
  }
  &.is-opacity {
    opacity: 0;
  }
}
.more-link {
  cursor: pointer;
  padding-left: 8px;
  padding-right: 2px;
  color: rgba(0, 0, 0, 0.38);
  font-size: 14px;
}
</style>
